<template>
	<view>
		<view class="container ptb35 plr30">
			<block v-for="(item,index) in couponLists" :key="item.id">
				
				<view class="coupon mlrauto mb30" v-if="item.coupon.state == 0">
					<image class="img-bg" src="/static/icon/icon_couponbg2.png" mode="aspectFit"></image>
					<view class="inner flex-box">
						<view class="left">
							<view class="price mb15">{{item.coupon.type==1?item.coupon.money:item.coupon.discount+'折'}}</view>
							<view class="fs24 col-red tc">满{{item.coupon.at_least}}元可用</view>
						</view>
						<view class="center pl30 pt50">
							<view class="fs32 col-black mb20">{{item.coupon.name}}</view>
							<view class="fs24 col-9">{{item.coupon.use_start_time_text}} ~ {{item.coupon.use_end_time_text}}</view>
						</view>
						<view class="right flex-box flex-center">
							<view class="fs26 col-red">
								<view>已过期</view>
							</view>
						</view>
					</view>
				</view>
				
			<view class="coupon mb30" v-else-if="item.coupon.use_status==0">
				<image class="img-bg" src="/static/icon/icon_couponbg1.png" mode="aspectFit"></image>
				<view class="inner flex-box">
					<view class="left">
						<view class="price mb15" >{{item.coupon.type==1?item.coupon.money:item.coupon.discount+'折'}}</view>
						<view class="fs24 col-red tc">满{{item.coupon.at_least}}元可用</view>
					</view>
					<view class="center pl30 pt50">
						<view class="fs32 col-black mb20">{{item.coupon.name}}</view>
						<view class="fs24 col-9">{{item.coupon.use_start_time_text}} ~ {{item.coupon.use_end_time_text}}</view>
					</view>
					<view class="right flex-box flex-center" >
						<view class="fs26 col-f" @click="courseLists()">
							<view>立即</view>
							<view>使用</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="coupon mb30" v-else>
				<image class="img-bg" src="/static/icon/icon_couponbg3.png" mode="aspectFit"></image>
				<view class="inner flex-box">
					<view class="left">
						<view class="price mb15">{{item.coupon.type==1?item.coupon.money:item.coupon.discount+'折'}}</view>
						<view class="fs24 col-red tc">满{{item.coupon.at_least}}元可用</view>
					</view>
					<view class="center pl30 pt50">
						<view class="fs32 col-black mb20">{{item.coupon.name}}</view>
						<view class="fs24 col-9">{{item.coupon.use_start_time_text}} ~ {{item.coupon.use_end_time_text}}</view>
					</view>
					<view class="right flex-box flex-center">
						<view class="fs26 col-f">
							<view>已使用</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		
		<view class="g-btn3-wrap">
			<view class="g-btn3"  :class="{nomore: couponListsMore.nomore == true || couponListsMore.loading == true}" @click="fetch">{{couponListsMore.text}}</view>
		</view>
		</view>
	</view>
</template>

<script>
	const util = require('@/xiluedu/util.js');
export default {
	data() {
		return {
			couponLists:[],
			couponListsMore:{page:1},
		};
	},
	onLoad() {
		this.fetch()
	},
	
	methods: {
		fetch() {
		
		    util.fetch(this, 'xiluedu.user/coupon_lists', {pagesize:10}, 'couponListsMore', 'couponLists', 'data', data=>{

		    })
		},
		courseLists(){
			uni.switchTab({
				url:"../course_list/course_list"
			})
		},  
	}
};
</script>

<style scoped>
.container {
	background: rgb(248, 248, 248);
}
.coupon{
	position: relative;
}
.coupon .img-bg{
	display: block;
	width: 690rpx;
	height: 190rpx;
}
.coupon .inner{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
.coupon .left{
	padding: 40rpx 0 0;
	width: 205rpx;
	height: 100%;
}
.coupon .center{
	width: 330rpx;
	height: 100%;
}
.coupon .right{
	width: 155rpx;
	height: 100%;
}
.coupon .price{
	font-size: 68rpx;
	font-weight: bold;
	color: var(--red);
	line-height: 70rpx;
	text-align: center;
}
.coupon .price::before{
	content: '￥';
	font-size: 28rpx;
	line-height: 36rpx;
}

</style>
